<template>
  <div class="jobs">
    <div class="banner">和优秀的人，做有挑战的事</div>

    <div class="main clearfix">
      <!-- 侧边栏过滤选择 -->
      <div class="clearfix aside-filter">
        <div class="header">
          <span>选择</span>
          <span class="clear">清空</span>
        </div>
        <div class="job-category job-filter-block">
          <div class="title"></div>
          <checkbox-transfer
              title="职位"
              ref="jobCategory"
              v-model="job_category_id_list"
              :props="{ key: 'id', label: 'name' }"
              :data="jobCategories"
          ></checkbox-transfer>
        </div>
        <div class="job-city job-filter-block">
          <div class="title"></div>
          <checkbox-transfer
              title="城市"
              ref="location"
              v-model="location_code_list"
              :props="{ key: 'code', label: 'name' }"
              :data="jobCities"
          ></checkbox-transfer>
        </div>
      </div>

      <!-- 主体内容 -->
      <div class="content" >
        <h2 class="content-title">所有投递简历 ({{ pageTotalCount }})</h2>
        <ul class="content-list">
          <li class="content-item" v-for="item in recruitPage" :key="item.recruitId">
            <!--            <router-link :to="`/jobs/${item.id}`">-->
            <h3 class="title">{{ item.name }}</h3>

            <div class="subTitle">
              <span class="city">{{ item.graduated }}</span>&nbsp;|
              <span class="job_category">{{ item.major }}</span>&nbsp;|
              <span class="recruitment_channel">{{ item.habitation }}</span>
              <el-rate
                  class="rate"
                  v-if="item.score"
                  v-model="item.score"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                  :colors="colors"
                  style="float: right;">
              </el-rate>
            </div>
            <p class="desc">求职意向: {{ item.aimJobPosition }}</p>
            <p class="desc">岗位类别: {{ item.jobCategory }}</p>
            <p class="desc">工作经验: {{ item.experience }}</p>
            <el-button class="btn" type="primary" plain @click="submitResume(item.resumeId)">详细简历</el-button>
            <!--            </router-link>-->
          </li>
        </ul>
        <!-- 分页器 -->
        <div class="pagination-wrapper" v-show="this.pageTotalCount">
          <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="pageTotalCount">
          </el-pagination>
        </div>
        <!--        <div class="pagination-wrapper">-->
        <!--          <pagination :current-page.sync="currentPage" :total="pageSize"></pagination>-->
        <!--        </div>-->
      </div>
    </div>
    <el-backtop></el-backtop>

    <el-dialog title="简历详细内容" :visible.sync="dialogVisible" width="60%">
      <div class="resumeForm">
      <div class="resumeViewSection">

        <div class="resumeViewForm">
          <div class="resumeViewItem">
            <div class="resumeViewItem__label">姓名</div>
            <div class="resumeViewItem__content">
              {{ formData.name }}
            </div>
          </div>
          <div class="resumeViewItem">
            <div class="resumeViewItem__label">联系电话</div>
            <div class="resumeViewItem__content">
              {{ formData.phone }}
            </div>
          </div>
          <div class="resumeViewItem">
            <div class="resumeViewItem__label">生日</div>
            <div class="resumeViewItem__content">
              {{ formData.birthday }}
            </div>
          </div>
          <div class="resumeViewItem">
            <div class="resumeViewItem__label">性别</div>
            <div class="resumeViewItem__content" v-show="formData.gender">
              女
            </div>
            <div class="resumeViewItem__content" v-show="!formData.gender">
              男
            </div>
          </div>
          <div class="resumeViewItem">
            <div class="resumeViewItem__label">婚姻情况</div>
            <div class="resumeViewItem__content" v-show="formData.marry">
              已婚
            </div>
            <div class="resumeViewItem__content" v-show="!formData.marry">
              未婚
            </div>
          </div>
          <div class="resumeViewItem">
            <div class="resumeViewItem__label">爱好</div>
            <div class="resumeViewItem__content">
              {{ formData.personalIntroduction }}
            </div>
          </div>
          <div class="resumeViewItem">
            <div class="resumeViewItem__label">技能</div>
            <div class="resumeViewItem__content">
              {{ formData.skill }}
            </div>
          </div>
        </div>
      </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import checkboxTransfer from '../../../components/Checkbox-Transfer'

export default {
  name: "job",
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      pageTotalCount: 0,
      job_category_id_list: [],
      jobCategories: [],
      jobCities: [],
      location_code_list: [],
      cityList: [],
      cities: [],
      results: [],
      searchBarFixedTop: false,
      loading: false,
      recruitPage: [],
      hasResume:false,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      dialogVisible:false,
      formData:{}
    };
  },
  mounted() {
    this.getPagination()
  },
  components: {
    checkboxTransfer,
  },
  methods: {
    async getPagination() {
      try {
        const {currentPage} = this
        await this.$store.dispatch('getPageResumes', currentPage)
        this.recruitPage = this.$store.state.enterprise.resumeList.records
        this.currentPage = this.$store.state.enterprise.resumeList.current
        this.pageSize = this.$store.state.enterprise.resumeList.size
        this.pageTotalCount = this.$store.state.enterprise.resumeList.total
      } catch (e) {
        console.log(e)
      }
    },
    handleCurrentChange(pageNo) {
      this.currentPage = pageNo;
      //重新调用findPage方法进行分页查询
      this.getPagination();
    },
    async submitResume(id){
      try {
        this.dialogVisible = true
        await this.$store.dispatch('getResume', id)
        this.formData = this.$store.state.enterprise.basicResume
      } catch (e) {
        console.log(e)
      }
    }
  },
};
</script>

<style lang="less" scoped>

.btn2{
  float: right;
  margin-right: 400px;
}


.btn {
  margin-left: 600px;
}

.banner {
  height: 400px;
  line-height: 400px;
  color: #fff;
  width: 100%;
  min-width: 1200px;
  background-image: url("//sf1-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/joblistbanner2x.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  font-size: 32px;
}

.main {
  margin: 0 auto;
  margin-top: 100px;
  padding: 0 100px 0 200px;

  .aside-filter {
    float: left;
    width: 300px;
    padding-right: 20px;

    .header {
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      border-bottom: 1px solid #ebeef5;
      padding-bottom: 10px;
      width: 100%;

      .clear {
        &.clearable {
          cursor: pointer;
        }
      }
    }

    .job-filter-block {
      margin-bottom: 40px;
    }
  }

  .content {
    min-height: 500px;
    padding-left: 20px;
    margin-left: 300px;

    &-title {
      margin-bottom: 30px;
      margin-left: 20px;
      font-size: 24px;
    }

    &-item {
      margin-bottom: 10px;
      padding: 10px 20px;
      cursor: pointer;

      .title {
        margin: 12px 0;
        font-size: 19px;
      }

      .subTitle {
        font-size: 16px;
        color: #606266;
      }

      .desc {
        white-space: pre-line;
        font-size: 14px;
        text-overflow: clip;
        color: #909399;
        padding-top: 16px;
      }

      &:hover {
        border-radius: 3px;
        background: #fff;
        box-shadow: 0 10px 30px 0 rgba(136, 150, 171, 0.15);
      }
    }

    .pagination-wrapper {
      margin-top: 50px;
      margin-bottom: 50px;
      text-align: left;
    }
  }
}
.resumeForm {
  margin-top: 30px;
  background: #fff;
  box-shadow: 0px 9px 20px 0px #c2c1c180;
  border-radius: 4px;
  padding: 30px;

  .resumeViewSection {
    min-height: 300px;
    margin-bottom: 30px;

    &__title {
      position: relative;
      height: 32px;
      margin-bottom: 38px;
      font-size: 20px;
      font-weight: 800;
      line-height: 1.6;
      color: #1f2329;
    }

    .resumeViewForm {
      margin-bottom: 30px;
    }

    .resumeViewItem {
      float: left;
      width: 50%;
      margin-bottom: 20px;
      min-height: 50px;

      &__resumeAttachment {
        display: flex;
        padding: 10px;
        background-color: #3370ff;
        align-items: center;

        time {
          //color: @regular-text-color;
          //font-size: @font-size-base;
        }

        .fileIcon {
          margin-right: 10px;
          width: 50px;
          height: 50px;
        }

        .download-link {
          margin-left: auto;

          .el-icon-download {
            //font-size: @font-size-large;
            border-radius: 50%;
            //border: 1px solid @border-base-color;
            padding: 4px;
          }

          &:hover {
            //color: @main-color;
          }
        }
      }

      &__content.is-link {
        //color: @main-color;
        cursor: pointer;
      }

      &__label {
        margin-bottom: 4px;
        height: 24px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.71;
        color: #1f2329;
        opacity: .45;
      }

      &__content {
        word-wrap: break-word;
        font-size: 16px;
        line-height: 1.75;
        color: #1f2329;
      }

      &__content-link {
        //color: @main-color;
      }

      &-desc {
        overflow: hidden;
        width: 70%;
        white-space: pre-line;
      }
    }
  }
}
</style>